<template>
  <div>
    <el-dialog
      title="事件信息"
      :visible.sync="visible"
      width="645px"
      append-to-body
      custom-class="fen_control"
      center=""
    >
      <div class="f_title">报警信息</div>
      <div class="flex align-center">
        <el-carousel height="156px" style="width:249px;">
          <el-carousel-item v-for="item in pictureList" :key="item.id">
            <img :src="item.url" style="width: 249px;height: 156px;">
          </el-carousel-item>
        </el-carousel>
        <div class="flex-sub" style="margin-left:20px;">
          <el-form ref="form" label-width="100px" label-position="right" size="small">
            <el-form-item label="报警类型">{{ info.eventType }}</el-form-item>
            <el-form-item label="报警设备">{{ info.equName }}
              <el-button type="text" style="margin-left: 6px;" @click="handleVideo"><svg-icon icon-class="fj_camera" /> 查看</el-button>
            </el-form-item>
            <el-form-item label="隧道名称">{{ info.tunnelName }}</el-form-item>
            <el-form-item label="来报时间">{{ info.warningTime }}</el-form-item>
          </el-form>
        </div>
      </div>
      <div class="f_title">设备运行信息</div>
      <el-radio-group
        v-model="equType"
        style="margin: 6px 0; "
        size="mini"
      >
        <el-radio-button label="1">风机运行信息</el-radio-button>
        <el-radio-button label="2">照明运行信息</el-radio-button>
      </el-radio-group>
      <el-table v-if=" equType == 1" :data="fjList">
        <el-table-column label="设备名称" align="center" prop="equName" />
        <el-table-column label="设备位置" align="center" prop="locationName" />
        <el-table-column label="风机故障" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.equOperation.trouble == 0">正常</span>
            <span v-if="scope.row.equOperation.trouble == 1" class="text-danger">故障</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="运行模式" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.equOperation.operatingMode == 0">手动</span>
          <span v-if="scope.row.equOperation.operatingMode == 1">自动</span>
        </template>
      </el-table-column> -->
        <el-table-column label="运行状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.equOperation.runningStatus == 1" class="text-navy">运行中</span>
            <span v-else>停止</span>
          </template>
        </el-table-column>
        <el-table-column label="运行频率" align="center">
          <template slot-scope="scope">
            {{ scope.row.equOperation.frequency }}
          </template>
        </el-table-column>
        <el-table-column label="风机电流" align="center">
          <template slot-scope="scope">
            {{ scope.row.equOperation.electricCurrent }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              :disabled="disabled"
              size="mini"
              type="text"
              @click="handleControl(scope.row)"
            >控制</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button :disabled="disabled" type="primary" size="small" @click="robots">巡检机器人</el-button>
        <el-button :disabled="disabled" type="primary" size="small" @click="plansPush">预案发布</el-button>
        <!-- <el-button size="small" @click="cancel">取 消</el-button> -->
      </div>
    </el-dialog>
    <FjControl ref="fjControl" />
    <el-dialog
      title="视频监控"
      :visible.sync="visibleVideo"
      width="887px"
      append-to-body
      custom-class="video_dialog"
    >
      <VideoMonitor ref="VideoMonitor" style="width: 100%;height: 100%;" />
    </el-dialog>
  </div>
</template>

<script>
import VideoMonitor from '@/components/VideoMonitor/video1.vue'
import FjControl from '@/views/subsys_jd/fen/control/components/Control.vue'
import { getEqu } from '@/api/fjgs/equ'
import { singleControl } from '@/api/fjgs/fjMutipleControl.js'
export default {
  components: {
    FjControl,
    VideoMonitor
  },
  data() {
    return {
      visible: false,
      tabPosition: '',
      cruent: '',
      form: {},
      value1: [],
      info: {},
      equType: 1,
      fjList: [],
      disabled: false,
      pictureList: [],
      visibleVideo: false,
      equInfo: {}
    }
  },
  methods: {
    reset() {
      this.form = {
        confEquId: null,
        operatingMode: null,
        runningStatus: null,
        frequency: null
      }
    },
    open(row, type) {
      this.info = row
      this.fjList = row.fjList
      this.pictureList = row.pictureList
      this.equInfo = row.equInfo
      console.log(row)
      //   const id = row.id || this.ids
      //   this.reset()
      //   getEqu(id).then(response => {
      //     this.form = {
      //       confEquId: response.data.equOperation.confEquId,
      //       operatingMode: response.data.equOperation.operatingMode,
      //       runningStatus: response.data.equOperation.runningStatus,
      //       frequency: response.data.equOperation.frequency
      //     }
      if (type == 1) {
        this.disabled = true
      }
      this.visible = true
    //   })
    },
    handEdit(index, row) {
      this.cruent = index
    },
    cancel() {
      this.visible = false
    },
    handleControl(row) {
      this.$refs.fjControl.open(row)
    },
    robots() {
      //
      this.$router.push({
        path: '/sys_jd/equ/robot/robot'
      })
    },
    plansPush() {
      //
      this.$router.push({
        path: '/sys_jd/warning/plans/publish'
      })
    },
    handleVideo() {
      this.visibleVideo = true
      setTimeout(() => {
        const equInfo = this.equInfo
        var url = 'rtsp://' + equInfo.loginName + ':' + equInfo.password + '@' + equInfo.ip + '/Streaming/Channels/1'
        this.$refs.VideoMonitor.init(url)
      }, 10)
    }
    // submitForm() {
    //   this.$refs['form'].validate(valid => {
    //     if (valid) {
    //       singleControl(this.form).then(response => {
    //         this.msgSuccess('修改成功')
    //         this.cancel()
    //         this.$emit('success')
    //         // this.getList()
    //       })
    //     }
    //   })
    // }
  }
}
</script>

    <style lang="scss" >
    .f_title {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        line-height: 20px;
        &::before {
            display: block;
            content: ' ';
            width: 3px;
            height: 14px;
            background: #3D7FFF;
            margin-right: 6px;
        }
    }
    .fen_control {
        .el-dialog__body {
          padding: 16px 20px;
        }
        .el-form-item__label {
          padding-bottom: 0;
        }
    }
.video_dialog .el-dialog__body{
    padding: 4px;
}
    </style>

